
Vue.component("my-post", {
    template: `
        <div class="inner">
            <article class="article-list bloglist" id="LAY_bloglist" v-for="(p,i) in post " >
               <section class="article-item zoomIn article">
                    <div class="fc-flag" v-if="p.goodpost==0">精品</div>
                    <h5 class="title">
                    <a :href="'read.html?postId='+ p.id">{{p.title}}</a>
                    </h5>
                    <div class="time">
                        <span class="day">{{p.date}}</span>
                        <span class="month fs-18">{{p.month}}<span class="fs-14">月</span></span>
                        <span class="year fs-18 ml10">{{p.year}}</span>
                    </div>
                    <div class="content" style="overflow:hidden;">
                        <a :href="'read.html?postId='+ p.id" class="cover img-light">
                        <!--       TODO                -->
                          
                        <img :src="p.img">
                        </a>
                        {{p.body}}
                    </div>
                    <div class="read-more">
                        <a :href="'read.html?postId='+ p.id" class="fc-black f-fwb">点击阅读</a>
                    </div>
                    <aside class="f-oh ">
                    <div class="f-fl tags">
                        <span class="fa fa-tags fs-16" ></span>
                        <a class="tag" v-for="k in keyword[i] " >{{k}}</a>
                    </div>
                    <div class="f-fr">
                        <span class="read">
                        <img src="image/icon/zan.png" width="13px" height="13px">
                        <i class="num" >{{p.likesum}}</i>
                        </span>
                        <span class="read">
                        <img src="image/icon/like.png" width="13px" height="13px">
                        <i class="num" >{{p.collectsum}}</i>
                        </span>
                        <span>
                        <i class="fa fa-comments fs-16"></i>
                        <a class="num fc-grey" >{{p.commentsum}}</a>
                        </span>
                    </div>
                    </aside>
               </section>
               
               </el-pagination>
   
            
            </article>
                <el-pagination background
            layout="prev, pager, next"
            :total="maxsize"  
             @current-change="query"
            :page-size="7">
        </div>
    `,
    data() {
        return {
            post: [],
            keyword: [],
            maxsize:7,//分页条最大页数，，每页七个数据
            onesize:7,//每页评论条数
        }
    },
    created() {
        this.query();
        this.getpostsum();
    },
    methods: {
        //拿到回复帖子总数，设置枫叶条
        getpostsum(){
            let id = location.search.replace(/\?problemId=(\d+)/, "$1");
            axios.get("GetPostSumServlet.s?problemId="+id).then(res=>{
                console.log("--init getPostSum-----")
                this.maxsize=res.data/this.onesize+1
            })
        },
        query(page) {
            page = page || 0;

            let url = "QueryPostByProblemIdServlet.s?problemId=";
            let id = location.search.replace(/\?problemId=(\d+)/, "$1");
            url += id;
            url += "&size=7&page=" + page;
            axios.get(url).then(res => {
                console.log("进入axios中")
                this.post=res.data;
                //帖子关键词 二维数组第一维
                let tkeyword = new Array(this.post.length);
                for (let i = 0; i < this.post.length; i++) {
                    //帖子关键词 二维数组第二维
                    tkeyword[i] = this.post[i].keyword.split("|");
                }
                this.keyword = tkeyword;
                console.log(this.post)
                console.log(this.keyword)
            })
        },
    }
})

Vue.component("my-reply-post",{
    template:`
        <div>
            <!--             回复贴部分             民生各有所乐兮，余独好修以为常 -->
            <div class="mt20">
                <ul class="message-list" id="message-list">
                <!--{account:"121314",head_img:"",nickname:"漳州三年",body:"这是一条评论",begintime:"2022-05-03 20:05:37"}-->
                    <li class="zoomIn article" v-for="(r,index) in reply">
                        <!--    一级评论     -->
                        <div class="comment-parent">
                            <a name="remark-1"></a>
                            <img :src="r.head_img"/>
                            <div class="info">
                                <span class="username">{{r.nickname}}</span>
                            </div>
                            <div class="comment-content">
                                {{r.body}}
                            </div>
                            <p class="info info-footer">
                                <span></span>
                                <span class="comment-time">{{r.begintime}}</span>
                                <span v-if="r.isSupport!=1">
                                    <el-button circle size="mini" style="margin-left: 70%" @click="dianzan(index)">
                                        <svg t="1652932150878" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2268" width="32" height="32"><path d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z" p-id="2269" fill="#bfbfbf"></path></svg>
                                    </el-button>
                                </span>
                                <span v-else>
                                    <el-button circle size="mini" style="margin-left: 70%" @click="jinggao">
                                        <svg t="1652932150878" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2268" width="32" height="32"><path d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z" p-id="2269" fill="#1296db"></path></svg>
                                    </el-button>
                                </span>
                                <span>{{r.likesum}}</span>
                            </p>
                        </div>
                    </li>
                </ul>

            </div>
            <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="maxsize"
                  @current-change="getreply">
            </el-pagination>

        </div>
    `,
    data(){
        return{
            reply:[],
            postId:'',
            maxsize:7,//分页条最大页数，，每页七个数据
            onesize:7,//每页评论条数

        }
    },
    created(){
        console.log("----intit created-----")
        let postId = location.search.replace(/\?postId=(\d+)/, "$1");
        this.postId=postId
        this.getreply(0)
        this.getUserIsSupport()
    },
    methods:{
        jinggao(){
            this.$message({
                message: '您已经点过赞了~',
                type: 'warning',
                offset:70,
            });
        },
        //点赞
        dianzan(index){
            console.log(index)
            console.log ("点赞")
            console.log("this.reply=",this.reply)
            axios.get("EnterLikeReplyServlet.s?replyid="+this.reply[index].id+"&applyAccount="+this.reply[index].account).then(res=>{
                console.log("----init dianzan axios end-----")
                console.log(res.data)
                //修改页面点赞状态
                this.reply[index].isSupport=1
                this.reply[index].likesum = parseInt(this.reply[index].likesum)+1;
            })
        },
        //拿到评论总数，设置枫叶条
        getreplysum(){
            axios.get("GetReplySumServlet.s?postId="+this.postId).then(res=>{
                console.log("--init getreplysum-----")
                this.maxsize=res.data/this.onesize+1
            })
        },
        getreply(begin){
            console.log(begin)
            begin=(begin)*this.onesize
            let url="QueryReplyServlet.s?postId="+this.postId+"&begin="+begin+"&size="+this.onesize;
            axios.get(url).then(res=>{
                this.reply=res.data
                console.log(this.reply)
            })
        },
        getUserIsSupport(){
            let url="UserBooleanSuppServert.s"
        }
    }
})